import { action, observable } from "mobx";
import { PrefabPath } from "../config/PrefabPath";
import LayerBase from "../core/common/LayerBase";
import UIManager from "../core/managers/UIManager";
import { GamingStore, WordData } from "../core/store/GamingStore";
import { UserStore } from "../core/store/UserStore";
import { observer, render } from "../mobx/observer";
import AnswerItem from "./item/AnswerItem";
import SelectedWordItem from "./item/selectedWordItem";
import WordItem from "./item/WordItem";

const { ccclass, property } = cc._decorator;
@ccclass
@observer

export default class GameMainLayer extends LayerBase {

    @property({ type: cc.Label, tooltip: '关卡' })
    labLevel: cc.Label = null;

    @property({ type: cc.Button, tooltip: '确定按钮' })
    btnOk: cc.Button = null;

    @property({ type: cc.Button, tooltip: '清除按钮' })
    btnClear: cc.Button = null;

    @property({ type: cc.Button, tooltip: '重新开始' })
    btnReset: cc.Button = null;

    @property({ type: cc.Node, tooltip: '答案区' })
    worldPool: cc.Node = null;

    @property({ type: cc.Node, tooltip: '输入区' })
    writeProgress: cc.Node = null;

    @property({ type: cc.Node, tooltip: '完成区' })
    answerComplete: cc.Node = null;

    @property({ type: cc.Prefab, tooltip: '成语' })
    answerItem: cc.Prefab = null;

    @property({ type: cc.Prefab, tooltip: '未选中的字' })
    wordItem: cc.Prefab = null;

    @property({ type: cc.Prefab, tooltip: '选中的字' })
    selectedWordItem: cc.Prefab = null;

    curWordsStr: string[] = null;

    @observable
    curLevel: number = -1;

    onLoad() {
        this.initEvent();
        this.resetGame();
        this.initGame();
    }

    initEvent() {
        this.btnOk.node.on(cc.Node.EventType.TOUCH_START, this.onAnswerOk, this);
        this.btnClear.node.on(cc.Node.EventType.TOUCH_START, this.onAnswerClear, this);
        this.btnReset.node.on(cc.Node.EventType.TOUCH_START, this.initGame, this);
    }

    resetGame() {
        this.worldPool.removeAllChildren();
        this.writeProgress.removeAllChildren();
        this.answerComplete.removeAllChildren();
    }

    @action
    initGame() {
        this.resetGame();
        GamingStore.Ins.reset();
        this.renderWordsPool();
    }

    @action
    onAnswerOk() {
        GamingStore.Ins.sure();

    }

    @action
    onAnswerClear() {
        GamingStore.Ins.clear();
    }

    /**
     * 初始化主动渲染所有字
     * 之后变化在字本身处理
     */
    renderWordsPool() {
        this.worldPool.removeAllChildren();
        for (const key in GamingStore.Ins.allLevelWords) {
            const data = GamingStore.Ins.allLevelWords[key]
            let item: cc.Node;
            item = cc.instantiate(this.wordItem)
            let itemJs = item.getComponent(WordItem)
            itemJs.setData(data);
            this.worldPool.addChild(item);
        }
    }
    /**
     * 渲染当前选中字
     */
    @render
    renderWriteProgress() {
        this.writeProgress.removeAllChildren();
        if (GamingStore.Ins.selectedWords.length) {
            GamingStore.Ins.selectedWords.forEach(wordInfo => {
                let item: cc.Node;
                item = cc.instantiate(this.selectedWordItem)
                let itemJs = item.getComponent(SelectedWordItem)
                itemJs.setData(wordInfo);
                this.writeProgress.addChild(item);
            });
        }
    }

    /**
     * 渲染验证完成成语
     */
    @render
    renderCompletedWords() {
        this.answerComplete.removeAllChildren();
        if (GamingStore.Ins.completedWords.length) {
            GamingStore.Ins.completedWords.forEach(wordInfo => {
                let item: cc.Node;
                item = cc.instantiate(this.answerItem)
                let itemJs = item.getComponent(AnswerItem)
                itemJs.setData(wordInfo);
                this.answerComplete.addChild(item);
            });
        }
    }
    /**
     * 渲染按钮是否可点击
     */
    @render
    renderBtn() {
        this.btnOk.interactable = GamingStore.Ins.isFull;
        GamingStore.Ins.sure();
    }

    @render
    renderClearBtn() {
        this.btnClear.interactable = !GamingStore.Ins.isZero;
    }

    /**
     * 通关之后逻辑处理
     */
    @render
    renderPass() {
        if (GamingStore.Ins.isPass) {
            UIManager.show(PrefabPath.levelSuccess);
        }
    }
    backHome() {
        UIManager.hide(PrefabPath.gameLayer);
        UIManager.show(PrefabPath.gameMainLayer);
    }


    @render
    renderLevel() {
        this.curLevel = UserStore.Ins.level;
        this.labLevel.string = `第${UserStore.Ins.level}关`;
        this.initGame();

    }
}